<template>
	<!-- 顶部卡片区域 -->
	<view class="wrap">
		<view class="top_card acea-row row-column" style="flex-wrap: nowrap;">
			<view class="top acea-row row-middle row-between" style="maring-bottom: 25rpx;width: 100%;">
				<text class="font32 col_33">{{data.title || ''}}</text>
				<text class="font30 col_80">访问人数： {{data.view || 0}}</text>
			</view>
			<view class="btns font26 acea-row row-middle row-between "
				style="position: relative; width: 100%;padding-top: 20rpx;">
				<!-- <dropdown-screen :categoryArr="categoryArr" :listArr="['访问次数','停留时长']"   @finish="finish"></dropdown-screen> -->
				<!-- <view :class="activeIdx == 1 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(1)">访问次数</view> -->
				<!-- <view :class="activeIdx == 2 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(2)">停留时长</view> -->

				<dropdown-screen :listArr="listArr" :itemArr="itemArr" :screenBarStyle="screenBarStyle"
					:isShowMask="false" activeColor="#EE212D" :isButtonMode="true" :itemNum="3" :activeIndex="activeIdx"
					@finish="finish" ref="down" style="width:100%;">
					<template v-slot:head>
						<view :class="activeIdx == 0 ? 'col_ff bg_red':'col_33 bg_gray'" @click="changeTab(0)">全部</view>
					</template>
				</dropdown-screen>

			</view>
		</view>

		<!-- 列表数据 -->
		<view class="bottom">
			<view class="listItem acea-row row-middle row-between" v-for="(item,index) in list">
				<image :src="item.avatar?item.avatar:''" mode="aspectFill" @click="toDetail(item)"></image>
				<view class="info acea-row row-column">
					<text class="col_33 font26">{{item.nickname}} <text style="color: red;margin-left: 12rpx;"
							@click="catchPhone(item.phone)">{{mind == 1 || item.statusPhone == 1?item.phone :( item.phone.replace(/(\d{3})\d*(\d{4})/,'$1****$2'))}}</text></text>
					<text class="col_80 font24">{{item.behavior || ''}}</text>
				</view>
				<view class="other col_A6 acea-row row-column font22">
					<text>{{item.createTime}}</text>
					<text> 访问{{item.visits || 0}} 次，停留{{ (item.residence/60).toFixed(2)}}分钟</text>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' @click="loadMore">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
	import dropdownScreen from '../components/dropdown-screen/dropdown-screen'
	import {
		visitorList
	} from '@/api/api.js'
	export default {
		components: {
			dropdownScreen
		},
		data() {
			return {
				activeIdx: 0,
				loading: false,
				loadTitle: '加载更多',
				type: -1,
				data: {},
				vid: -1,
				list: [],
				page: 1,
				categoryArr: [],
				listArr: ["访问次数", "停留时长"],
				itemArr: [
					[{
						text: '多优先',
						value: 0
					}, {
						text: '少优先',
						value: 1
					}],
					[{
						text: '长优先',
						value: 2
					}, {
						text: '短优先',
						value: 3
					}]
				],
				screenBarStyle: {
					padding: "0 30rpx"
				},
				sort: '',
				mind: 0
			}
		},
		onLoad(options) {
			if (!options.data) {
				this.$util.Tips({
					title: '数据获取失败'

				}, {
					tab: 3
				})
				return;
			}
			this.data = JSON.parse(options.data);
			this.mind = options.mind ? options.mind : this.mind;
			console.log('详情', options.mind, this.mind)
			if (this.data.id) {
				this.type = this.data.vistype ? this.data.vistype : 1;
				this.vid = this.data.id;
			} else if (this.data.buystoreId) {
				this.type = 7;
				this.vid = this.data.buystoreId;
			} else {
				this.type = 6;
				this.vid = this.data.askrentId;
			}
			this.getList()
		},
		methods: {
			//跳转个人主页
			toDetail(item) {
				let that = this;
				console.log(2)
				uni.navigateTo({
					url: '/pages/details/merchantInfo/merchantInfo?type=personal&id=' + item.uid,
					events: {
						fanss(data) {
							that.fansOpear(data.info, data.callback);
						}
					}
				})
			},
			changeTab(index) {
				this.activeIdx = index;
				this.sort = ''
				this.$refs.down.initUpdateArr()
				this.getList()
			},
			loadMore() {
				this.page++
				this.getList()
			},
			catchPhone(phone) {
				phone ? getApp().globalData.toPhone(phone, this.mind,{open:1}) : null
			},
			finish(data) {
				this.activeIdx = data.$index + 1
				this.sort = data.value
				this.page = 1;
				this.getList();
			},
			getList() {
				if (this.page == 1) {
					this.list = []
				}
				visitorList({
					id: this.vid,
					type: this.type,
					page: this.page,
					sort: this.sort
				}).then(res => {
					if (res.code == 200) {
						let d =  res.data.list.filter(item=>{
							if(item.phone){
								return item;
							}
						})
						console.log("items",d)
						this.list = [...this.list, ...d]
						if (this.page == 1 && res.data.list.length < 1) {
							this.loadTitle = '暂无数据'
						} else if (res.data.list.length < 1) {
							this.loadTitle = '已加载全部'
						}
					}

				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F8FA;
	}

	.wrap {
		padding: 30rpx 28rpx;
	}

	.font20 {
		font-size: 20rpx;
	}

	.font22 {
		font-size: 22rpx;
	}

	.font24 {
		font-size: 24rpx;
	}

	.font26 {
		font-size: 26rpx;
	}

	.font30 {
		font-size: 30rpx;
	}

	.font32 {
		font-size: 32rpx;
	}

	.font36 {
		font-size: 36rpx;
	}

	.red {
		color: #EE212D;
	}

	.bg_red {
		background-color: #EE212D;
	}

	.bg_gray {
		background-color: #F7F7F7;
	}

	.col_80 {
		color: #808080;
	}

	.col_A6 {
		color: #a6a6a6;
	}

	.col_33 {
		color: #333333;
	}

	.col_ff {
		color: #ffffff;
	}

	.top_card {
		width: 100%;
		box-sizing: border-box;
		height: 192rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding: 30rpx 0;

		.top {
			padding: 0 30rpx;
		}

		.btns {
			// margin-top: 24rpx;

			view {
				width: 190rpx;
				height: 60rpx;
				border-radius: 10rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.bottom {
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		padding-bottom: 116rpx;

		.listItem {
			margin: 0 15rpx;
			padding: 38rpx 0;
			border-bottom: 2rpx solid #eee;

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 44rpx;
				margin-right: 20rpx;
			}

			.info {
				flex: 1;
			}

			.info,
			.other {
				text:first-child {
					margin-bottom: 14rpx;
				}
			}
		}
	}
</style>